<template>
  <div class="mt-8 w-full px-3.5 lg:pl-0 lg:pt-5 mb-9 lg:mb-16 lg:w-100 lg:mx-auto">
    <!-- title -->
    <div class="flex items-center justify-between mb-5 lg:mb-8">
      <!-- <WImage class="mr-3 w-6 h-6 lg:hidden" :src="useAsset('pc-home/h5home_special.png')" /> -->
      <h3 class="text-xl font-bold lg:text-2xl text-white uppercase font-mono">{{ $mt('Game Galaxy') }}</h3>
      <nuxt-link :to="$localePath('/game/list/1')" external class="text-white text-xs lg:text-sm">
        <span class="text-white lg:text-[#919495] cursor-pointer hover:text-red1">{{ $mt('View More') }}</span>
        <van-icon name="arrow" />
      </nuxt-link>
    </div>
    <!-- h5 -->
    <div class="mb-4 lg:hidden overflow-auto flex">
      <IntroduceItem
        class="ltr:mr-4 rtl:ml-4 w-36 shrink-0"
        v-for="(item, index) in introduceList"
        :key="index"
        :is-show-bg="true"
        :dataInfo="item" />
    </div>

    <!-- list  pc-->
    <div class="hidden lg:grid grid-cols-6 gap-6">
      <IntroduceItem
        v-for="(item, index) in introduceList.slice(0, 12)"
        :key="index"
        :is-show-bg="true"
        :dataInfo="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useRequest } from '~/composables/useRequest'
import { useHomeStore } from '~/store/home'
import WImage from '../logic/WImage.vue'
import NewDiscountItem from '~/components/home/NewDiscountItem.vue'
import DiscountItem from '~/components/home/DiscountItem.vue'
import IntroduceItem from '../introduce/IntroduceItem.vue'
import { useIntroduceStore } from '~/store/introduce'

const colorList = ['#452F52', '#253338', '#22264F', '#293825', '#413326', '#232C12', '#413326', '#163141']
const introduceStore = useIntroduceStore()
// 服务端渲染的数据
await useLazyAsyncData(async () => {
  return introduceStore.initIntroduceList(1, 12)
})
const { introduceList } = storeToRefs(introduceStore)
</script>

<style scoped lang="scss">
.h5-bg {
  background: url(/assets/images/pc-home/h5home_exclusive_pic@2x.webp) no-repeat;
  background-position: left top;
  background-size: 375px, 493px;
  // background-attachment: fixed;
}

.pc-bg {
  background: url(/assets/images/pc-home/pchome_exclusive_pic0@2x.webp) no-repeat;
  background-position: left top;
  background-size: 375px, 493px;
}

.scroll::-webkit-scrollbar {
  //隐藏或取消滚动条
  display: none;
}

.item-border {
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  background-color: #31383c;
  border-radius: 8px;
}

@keyframes scale-big {
  to {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}

.trans {
  &:hover {
    animation: scale-big 0.3s forwards;
  }
}
</style>
